<template>
  <div class="headerColor" :class="$route.meta!==3 ? 'active' : ''">
    <div class="headerMediate">
      <img src="@/assets/images/logo.png" alt="" class="logo" />
      <div class="navLeft">
        <span  @click="$router.push('/index')" :class="$route.meta ==1?'act':''">我的珍爱</span>
        <span :class="$route.meta ==2?'act':''" @click="$router.push('/search')">搜索</span>
        <span class="">实体店</span>
        <span :class="$route.meta ==3?'act':''" @click="$router.push('/vip')">珍心会员</span>
      </div>
      <div class="navRight">
        <div class="navContainer">
          <div class="navAdvices">
            <div class="advices">
              <img src="@/assets/images/advices.png" alt="" />
              <div class="advicesData">
                <span class="triangle"></span>
                <div @click="$router.push('/message')">消息</div>
                <div @click="$router.push('/follow')">关注</div>
              </div>
            </div>
          </div>
          <div class="navUserinfo">
            <div class="userinfo">
              <img src="@/assets/images/userinfo.png" alt="" />
              <div class="userinfoData">
                <span class="triangle"></span>
                <div @click="$router.push('/personal')">编辑资料</div>
                <div class="borderTop" @click="$router.history.replace('/login')">退出</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import ajax from "../../utils/ajax.js";
export default {
  name: "Header",
  data() {
    return {};
  },
  /* props: {
    isFalse: {
      type: Boolean,
      default: function () {
        return true;
      },
    },
  }, */
 mounted(){
   console.log(this.$route.meta);
 },
  methods: {},
};
</script>

<style lang="stylus" scoped>
.act
  border-bottom 2px solid #fff
  padding-bottom: 10px
.headerColor
  width 100%
  height 80px
  position fixed
  z-index 24
  &.active
    background #996ef0
.headerColor .headerMediate
  width 1200px
  margin 0 auto
.headerColor .logo
  float left
  margin 8px 70px 0 0
  width 130px
.headerColor .navLeft
  float left
  height 80px
  line-height 80px
  font-size 16px
  font-weight 500
  color white
.headerColor span
  cursor pointer
  margin-right 52px
.headerColor .navRight
  float right
  margin-right -300px
.headerColor .navContainer
  width 584px
  height 80px
  line-height 56px
.headerColor .navAdvices
  float left
  position absolute
  width 190px
  /* height: 214px; */
  z-index 11
.headerColor .navUserinfo
  position relative
  float left
  width 190px
  /* height: 300px; */
  margin-left 70px
  z-index 10
.headerColor .advices, .headerColor .userinfo
  position absolute
  cursor pointer
  margin-left 120px
  width 60px
  text-align right
  height 80px
.headerColor .advices img, .headerColor .userinfo img
  vertical-align bottom
  margin 0
  width 30px
  height 30px
.headerColor .advicesData, .userinfoData
  display none
  position absolute
  top 80px
  right -16px
  width 160px
  background white
  border-radius 4px
  text-align left
.headerColor .triangle
  display block
  width 0px
  height 0px
  position absolute
  top -20px
  right -27px
  border 10px solid
  border-color transparent transparent white
.headerColor .advices:hover .advicesData, .headerColor .userinfo:hover .userinfoData
  display block
.headerColor .userinfoData .borderTop
  border-top 1px solid #efefef
.headerColor .advicesData div, .headerColor .userinfoData div
  cursor pointer
  height 42px
  padding 0px 10px 0 10px
  font-size 14px
  font-weight 400
  color #333333
  line-height 42px
</style>
